<template>
  <div style="padding-bottom: 436px;" class="container-big dingtalk-ticket-detail-page">
    <div class="dingtalk-ticket-banner">
      <ucan-ticket :imgUrl="ticket.imgUrl" :state="ticket.state" :activityTitle="ticket.activityTitle" :isDel="ticket.isDel" :isPay="ticket.isPay" :source="ticket.source" :transferTicketId="ticket.transferTicketId" :groupBuying="groupBuying" :isActive="ticket.isActive" :key="ticket.ticketId" :id="ticket.ticketId" :name="ticket.uName" :uTel="ticket.uTel" :type="ticket.tTypeName" :address="ticket.address" :price="ticket.price" :activityId="ticket.activityId" :ticketTypeId="ticket.ticketTypeId" :activeTime="{stime: ticket.stime, etime: ticket.etime, activeDate: ticket.activeDate}" />
    </div>
    <div class="dingtalk-ticket-content">
      <div class="dingtalk-use-ticket">
        <div class="use-ticket-title">
          用票人信息
        </div>
        <div class="use-ticket-content">
          <p v-if="ticket[item.attribute.filedCode]" v-for="(item,index) of fieldList" :key="index" class="use-ticket-message">
            <span class="msg-label">
              {{item.attribute.titName}}
            </span>
            <span class="msg-content">
              {{ticket[item.attribute.filedCode]}}
            </span>
          </p>
          <p class="use-ticket-message">
            <span class="msg-label">
              订单编号
            </span>
            <span class="msg-content">
              {{ticket.orderCode}}
            </span>
          </p>
        </div>
      </div>
    </div>

    <co-dialog :open="faceAlert" class="ticket-auth-dialog-wrapper" dialog-class="ticket-auth-dialog">
      <div class="ticket-auth-dialog-header">
        <h3 class="ticket-auth-dialog-title">人脸快速入场</h3>
        <img src="https://gw.alicdn.com/tfs/TB1qKkQHirpK1RjSZFhXXXSdXXa-698-696.png" class="ticket-auth-avatar">
      </div>
      <div class="ticket-auth-dialog-content">
        <p style="text-align: center;font-weight: bold;padding: 6px 0px;">授权提示</p>
        <p class="argeement-desc" v-for="(item,index) of agreement" :key="index" v-html="item.xyvote"></p>
      </div>
      <div class="ticket-auth-dialog-action" @click="photoUp()">同意并继续</div>
    </co-dialog>

  </div>
</template>
<script>
  import UcanTicket from "./ucan-ticket";
  import services from "@/api/mine";
  import { addZero } from "../../utils";
  import ddApi from "./ddApi";

  export default {
    data() {
      return {
        agreement: [], //服务协议
        activityId: "", //活动ID
        faceAlert: false, //录脸弹框
        findPhotoStatusNum: 0, //露脸状态查询次数
        groupBuying: false, //是否团购票
        fieldList: [], //表单字段
        ticket: {} //门票详情
      };
    },
    created() {
      ddApi.setRight();
      this.groupBuying = this.$route.query.groupBuying || false;
      this.getTicket();
    },
    methods: {
      // 获取门票详情，子组件有调用
      async getTicket() {
        const { ticketTypeId, ticketId, activityId } = this.$route.query;
        this.activityId = activityId;
        if (this.groupBuying) {
          // 团购票
          const { data } = await services.queryGroupTicketByIds({
            ticketId,
            activityId
          });

          const res = {
            ...data.myTicketList,
            price: data.price,
            address: data.address,
            etime: data.etime,
            stime: data.stime,
            activeDate: data.activeDate,
            imgUrl: data.imgUrl
          };
          this.ticket = res;
          console.log("res", res);

          this.queryTempletByTicketTypeId(res);
        } else {
          services.getTicket(Number(ticketTypeId), ticketId).then(res => {
            this.ticket = res;
            console.log("res", res);

            this.queryTempletByTicketTypeId(res);
          });
          //从我的门票进入则查询露脸状态
          if (
            localStorage.getItem("isNeedFace") != "false" &&
            this.activityId
          ) {
            // 查询是否需要露脸
            const { data } = await services.queryActivityById({
              activityId,
              corpId: sessionStorage.getItem("corpId")
            });

            if (data.needEnterFace == 1) {
              // 1是需要
              this.getFaceInfo();
            }
          }
        }
      },
      // 初始化方法
      async getFaceInfo() {
        //掉接口判断是否需要露脸
        const { data } = await services.getPhotoStatus(
          `activityId=${this.activityId}`
        );

        let isNeedFace = false; //是否需要录脸默认不需要
        if (data.review === false) {
          isNeedFace = true;
        }
        if (isNeedFace && this.activityId) {
          // 查询当前活动的露脸协议付费的，但是列表上有免费和付费协议
          const queryTempletByActivityId = await services.queryTempletByActivityId(
            {
              activityId: this.activityId,
              isPay: this.ticket.isPay
            }
          );
          this.agreement = [];
          for (
            let i = 0;
            i < queryTempletByActivityId.data.agreeList.length;
            i++
          ) {
            //1 购票协议 2 登录协议 3 露脸协议
            if (queryTempletByActivityId.data.agreeList[i].typeId == 3) {
              this.agreement.push(queryTempletByActivityId.data.agreeList[i]);
            }
          }
          this.faceAlert = true;
        } else {
          localStorage.setItem("isNeedFace", "false");
        }
      },
      // 拍照上传
      async photoUp() {
        let res = await ddApi.uploadImageFromCamera();
        if (!res) {
          this.$toast("拍照失败");
          return;
        }
        this.$store.state.loading = true;
        const { success = false } = await services.enterFace({
          activityId: this.activityId,
          picUrl: res
        });
        this.$store.state.loading = false;
        if (success) {
          this.$toast("上传成功");
          // 认证成功以后赋值
          localStorage.setItem("isNeedFace", "false");
          this.faceAlert = false;
          setTimeout(() => {
            // alert("2.5秒查询露脸状态");
            this.findPhotoStatusNum = 0;
            this.findPhotoStatus();
          }, 2500);
        }
      },
      // 查询露脸状态
      async findPhotoStatus() {
        if (this.findPhotoStatusNum >= 2) {
          return;
        }
        //掉接口判断是否需要露脸
        this.findPhotoStatusNum++;
        const { data } = await services.getPhotoStatus(
          `activityId=${this.activityId}`
        );
        if (data.review !== false) {
          this.$toast("人脸审核通过");
          return;
        } else {
          setTimeout(() => {
            // alert("2.5秒查询露脸状态");
            this.findPhotoStatus();
          }, 2500);
        }
      },

      //得到报名表单字段
      async queryTempletByTicketTypeId(res) {
        const { data = [] } = await services.queryTempletByTicketTypeId({
          activityId: res.activityId, //票上获取活动id ，
          isPay: res.isPay || "pay",
          ticketTypeId: res.ticketTypeId
        });

        if (data.vnote1) {
          this.fieldList = JSON.parse(data.vnote1);
          this.fieldList.map(item => {
            item.attribute.filedValue = "";
          });
        }
      }
    },
    components: {
      UcanTicket
    }
  };
</script>
<style lang="less">
  .ticket-auth-dialog {
    width: 638px;
    border-radius: 4px;
    position: relative;
    .co-dialog-body {
      padding: 0;
    }

    .ticket-auth-avatar {
      width: 307px;
      display: block;
      margin: 10px auto 0;
    }
  }

  .ticket-auth-dialog-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 468px;
    background: url(https://gw.alicdn.com/tfs/TB1XIkLHgTqK1RjSZPhXXXfOFXa-638-515.png)
    no-repeat;
    background-size: cover;
    width: 100%;
  }

  .ticket-auth-dialog-title {
    padding: 32px 0;
    text-align: center;
    font-size: 36px;
    color: #fff;
    font-weight: normal;
  }

  .ticket-auth-dialog-close {
    position: absolute;
    right: 24px;
    top: 24px;
    color: #fff;
  }

  .ticket-auth-dialog-content {
    padding: 32px;
    color: #333;
    font-size: 28px;
    line-height: 1.6;
    .argeement-desc {
      color: #888;
      margin-top: 24px;
      > a {
        color: #108ee9;
      }
    }
  }

  .ticket-auth-dialog-action {
    height: 102px;
    line-height: 101px;
    border-top: 1px solid #e5e5e5;
    color: #108ee9;
    font-size: 36px;
    display: block;
    width: 100%;
    text-align: center;
  }
  .dingtalk-ticket-detail-page {
    background-color: #1b1c20;
    text-align: left;

    .dingtalk-ticket-banner {
      padding: 32px 30px;
      background-size: 100%;
    }

    .dingtalk-ticket-content {
      margin-top: 52px;
      padding: 0 30px 30px;
    }

    .dingtalk-use-ticket {
      margin-top: 64px;
      .use-ticket-title {
        font-size: 30px;
        margin-bottom: 24px;
      }
      .use-ticket-content {
        background: rgba(76, 76, 76, 0.2);
        border: 1px solid rgba(93, 93, 93, 0.2);
        padding: 40px;
      }

      .use-ticket-message {
        margin-top: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        &:first-child {
          margin-top: 0;
        }
        .msg-label {
          width: 160px;
          flex-shrink: 0;
          text-align: left;
          margin-right: 24px;
          font-size: 26px;
          color: #fff;
        }
        .msg-content {
          flex: 1;
          font-size: 26px;
          color: #fff;
        }
      }
    }
  }
</style>
